<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- css样式表 -->
    <link rel="stylesheet" href="../../css/base.css">
    <!-- <link rel="stylesheet" href="../../css/rateSearch.css"> -->
    <link rel="stylesheet" href="../../css//rate/goodList.css">
    <link rel="stylesheet" href="../../inc/include.css">

    <!-- js -->
    <script src="../../lib/zepto/zepto.js"></script>
    <script src="../../js/rateSearch.js"></script>
    <script src="../../js/htmlFont.js"></script>
    <script src="../../lib/template/template.js"></script>
    <script src="../../js/untils.js"></script>
</head>

<body>
    <header>
        <div class="header-top">
            <img src="../../images/header_logo.png" alt="">
            <img src="../../images/header_app.png" alt="">
        </div>
        <div class="header-footer">
            <input type="text" class="ipt" placeholder="请输入你想比价的商品">
            <a href="javascript:;">搜索</a>
        </div>
        <!-- <div class="kong"></div> -->
    </header>
    <div class="view">
        <!-- 头部菜单栏 -->
        <div class="goodTap">
            <div class="tap_left">

            </div>
            <div class="tap_right">
                <a href="javascript:;">
                    筛选
                </a>
            </div>
        </div>
        <!-- 商品列表栏 -->
        <div class="gl_list">
            <ul class="clearfix">

            </ul>
        </div>
        <!-- 上下页面 -->
        <form action=""></form>
        <div class="gl_page clearfix">

            <input type="button" value="上一页" class="gp_pre fl">
            <select name="cars" class="gl_taps">
                <option value="1"><span>1/4</span></option>
                <option value="2">2/4</option>
                <option value="3">3/4</option>
                <option value="4">4/4</option>
            </select>
            <input type="button" value="下一页" class="gp_next fr">

        </div>
        </form>
    </div>
</body>

</html>
<!-- 渲染头部菜单栏 -->
<script type="text/template" id="goodTapList">
    {{each result as val key}}
        <span>
            <a href="javascript:;">首页</a>
        </span>
        <span>
            <a href="./rateSearch.html">全部分类</a>
        </span>
        <span>
            <a href="javascript:;">{{val.category}}</a>
        </span>
    {{/each}}
</script>
<!-- 渲染商品列表 -->
<script type="text/template" id="glListTemp">
    {{each result as val key}}
        <li>
            <div class="gll_left fl">
                <a href="javascript:;" class="gl_img">
                    {{val.productImg}}
                </a>
            </div>
            <div class="gll_right fr">
                <span class="gr_title">
                    <a href="javascript:;">
                        {{val.productName}}
                    </a>
                </span>
                <span class="gr_price">
                    <a href="javascript:;">
                        {{val.productPrice}}
                    </a>
                </span>
                <div class="gr_bottom">
                    <span><a href="javascript:;">{{val.productQuote}}</a></span>
                    <span><a href="javascript:;">{{val.productCom}})</a></span>
                </div>
            </div>
        </li>
    {{/each}}
</script>
<script>
    // 根据ID的值获取
    var str = location.search;
    var id = untils.converToObj(str).categoryId;
    var pageSize;
    console.log(id);
    // 渲染菜单页面
    $.ajax({
        type: "get",
        url: "http://193.112.55.79:9090/api/getcategorybyid",
        data: {
            categoryid: id
        },
        dataType: "json",
        success: function (res) {
            // console.log(res);
            var htmlStr = template("goodTapList", res);
            // 渲染页面
            $(".tap_left").html(htmlStr);
        }
    })
    // 渲染商品列表
    $.ajax({
        type: "get",
        url: "http://193.112.55.79:9090/api/getproductlist",
        data: {
            categoryid: id
        },
        dataType: "json",
        success: function (res) {
            console.log(res);
            // 存储模板
            // pageSize = res.pagesize;
            template.config("escape", false)
            var htmlStr = template("glListTemp", res);
            // 渲染页面
            $(".gl_list ul").html(htmlStr);
        }
    })
</script>